<template>
  <view>
    <view class="detailCard">
      <view class="title">{{ data.userName }}的答疑</view>
      <view class="subTitle">手机号：{{ data.phone }}</view>
      <view class="subTitle"
        >答疑分类：{{ data.productName }}-{{ data.cateName }}</view
      >
      <view class="bottom">
        <view v-if="isShowCalculateNum" class="bottom-title">核算数： </view>
        <NumInput
          v-if="isShowCalculateNum"
          :number="data.calculateNum"
          ref="numInputRef"
          @focus="focus"
          @blur="blur"
          @confirmCalculateNum="confirmCalculateNum"
        />
        <kk-button
          class="bottom-btn"
          :layout="kkButtonLayout.leftIcon"
          :iconSrc="data.recordStatus === 2 ? collectionIcon : unCollectionIcon"
          :isLineBackground="true"
          :text="data.recordStatus === 2 ? '取消收录' : '收录试题'"
          height="64"
          :iconWidth="32"
          :iconHeihgt="32"
          textColor="#fff"
          @tap="collectionQuestion"
        />
      </view>
      <view class="replayBtn" v-if="replayBtnText()">
        <kk-button
          height="54"
          background="#fff"
          :textColor="replayBtnTextColor()"
          :text="replayBtnText()"
        ></kk-button>
      </view>
      <view class="detailImg">
        <image
          mode="widthFix"
          class="detailImg-img"
          src="@/pagesA/static/images/chat/asnwer_top_bg.png"
        >
        </image>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import NumInput from "./numInput.vue";
import { kkButtonLayout } from "@/components/common/enmu";

import collectionIcon from "@/pagesA/static/images/common/collection_select.png";
import unCollectionIcon from "@/pagesA/static/images/common/collection_unselect.png";
import * as KKAswerApi from "@/api/answer";
import { computed } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  status: {
    type: Number,
    default: 1,
  },
  indexInfo: {
    type: String,
    default: "",
  },
});

// 未回复状态的答疑，不展示该字段 核算
const isShowCalculateNum = computed(() => {
  return true;
  // return props.status > 1;
});

//答疑状态 状态，1：待分配，2：分配未回复，3：流转未回复，4：分配已回复，5：流转已回复，6：追问未回复，7：追问已回复，8：已完成
// status 状态，1：未回复 2：追问未回复 3：已回复 4：已完成
const numInputRef = ref();

const replayBtnText = () => {
  if (props.status === 1 || props.status === 2) {
    // 1:未回复 2:追问未回复
    if (props.indexInfo) {
      if (props.status === 2) {
        return `追问未回复${props.indexInfo}`;
      } else {
        return `未回复${props.indexInfo}`;
      }
    }
    if (props.status === 2) {
      return "追问未回复";
    } else {
      return "未回复";
    }
  } else if (props.status === 3) {
    return "已回复";
  }
  return "";
};

const replayBtnTextColor = () => {
  if ([1, 2].includes(props.status)) {
    return "#126EFE";
  } else {
    return "#00C555";
  }
};

const collectionQuestion = () => {
  emit("collectionQuestion");
};

const focus = () => {
  emit("focus");
};
const blur = () => {
  emit("blur");
};

const confirmCalculateNum = async (value: number) => {
  const data = (await KKAswerApi.modifyCalculateNumProt({
    requestId: props.data.requestId,
    calculateNum: value,
  }).catch(() => {})) as any;
  if (data && Number(data.code) === 10000) {
    emit("confirmCalculateNum", value);
  }
};

const initCalculateNum = (value: number) => {
  if (value > 0) {
    numInputRef.value.initNumber(value);
  } else {
    numInputRef.value.initNumber(1);
  }
};

const emit = defineEmits([
  "focus",
  "blur",
  "confirmCalculateNum",
  "collectionQuestion",
]);
defineExpose({ initCalculateNum });
</script>

<style lang="scss" scoped>
.detailCard {
  width: 100vw;
  height: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 0rpx 0rpx 42rpx 42rpx;
  padding-bottom: 12px;
  .title {
    padding-top: 31rpx;
    padding-bottom: 24rpx;
    margin-left: 24rpx;
  }
  .subTitle {
    margin-left: 24rpx;
    margin-right: 24rpx;
    padding-bottom: 24rpx;
    font-size: 26rpx;
    color: #111111;
    line-height: 30rpx;
  }
  .bottom {
    margin-top: 24rpx;
    width: 100vw;
    height: 88rpx;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 0rpx 0rpx 42rpx 42rpx;
    &-title {
      padding-left: 24rpx;
      font-size: 26rpx;
      color: #111111;
      line-height: 30rpx;
    }
    &-btn {
      margin-left: auto;
      margin-right: 24rpx;
    }
  }
  .replayBtn {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    height: 54rpx;
  }
}
.detailImg {
  width: 100vw;
  height: 260rpx;
  border-radius: 0rpx 0rpx 42rpx 42rpx;
  z-index: -1;
  position: absolute;
  overflow: hidden;
  top: 0;
  &-img {
    border-radius: 0rpx 0rpx 42rpx 42rpx;
    width: 100vw;
  }
}
</style>
